<template>
 <div id="SlotRecommMV">
    
    <ul class="MVStyle">

        <!-- 接收父级数据 -->
        <!-- MV 精选页面 推荐MV  DT 精选页面 主播电台 GD 歌单页面 全部订单 -->
        <li class="MV" v-for="(items,index) in data" v-if="index<6" :key="index"> 
             <img  :src="items.cover" alt="">
            <span class="iconfont rightS" >&#xea6d; 560 </span>
             <span style="font-size:18px;margin-top: 4px;">{{items.title}}</span>
            
           <div style="display: flex;margin-top:5px">
             <img class="tt-tx" src="../../public/homeImg/NewMusic2.jpg" alt="">
             <span style="font-size:15px;margin-top: 4px;margin-left:5px">{{items.title}}</span>

           </div>
            <span></span>
        </li>


    </ul>
   
 </div>   
</template>

<script>
import '../../public/font_home/font-icon2/iconfont.js'
export default {
    props:{
        data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
        MV:{
            
        },
       
    },
     mounted() {
            // console.log(this.data)
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#SlotRecommMV{
div,span,ul,li,img{
    font-size: 0;
}
// margin: 10px;

    overflow: hidden;
  
        .rightS{
              position: absolute;
                  bottom: 20%;
          left: 80%;
            font-size: 16px;
              margin-bottom: 8px;
              color: white !important;
              font-weight: inherit;
    
    }
  
    h1{
        margin-bottom: 8px;
        color: #373737;
    }
    .MVStyle{
        // height: 260px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        //  justify-content: center;/*水平居中*/
    // align-items: center;/*垂直居中*/
         
           position: relative; 
           .tt-tx{
           width: 30px;
    height: 30px;
    border-radius: 50%;
           }
        .DtName{
//         position: absolute;
 text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
    // left: 5px;
    // bottom: 60px;
        font-size: 16px;
        color: white;
        max-width: 85%;
        }
            span,img{
                display: block;
    width: 96%;
        white-space: nowrap;
            text-overflow: ellipsis;
    overflow: hidden;
    color: #373737;
        }
        img{
             height:80%;
            border-radius: 2%;
        }
    }


     .MVStyle>.MV{
           position: relative;   
@media (min-width: 1100px) {
    flex: 0 0 33.3%;
    max-width: 33.3%;
} 
@media (min-width: 1800px) {
    flex: 0 0 16.6%;
    max-width: 16.6%;
} 
            
           height: 320px;
            box-sizing: border-box;
            // border: 1px solid #000;
            

     }
          
     



     .title-box{
         display: flex;
       position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
        left: 5px;
    bottom: 60px;
 width: 100%;
span:first-child{
        width: 90%;
        font-size: 20px;
        color:white;
        font-weight: 100;
         text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
 }
     }

   
   }
   
 

</style>